<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3-Promise-链式调用</title>
  </head>
  <body>
    <h2>Promise-链式调用</h2>
    <script>
      /**
       * Promise-链式调用
       *  1. then方法会返回一个新生成的promise对象，可以被链式调用
       *  2. then方法中回调函数返回值会影响新Promise对象的状态和结果
       * */
      function getPname() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('省份数据')
          }, 2000)
        })
      }
      function getCname() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('城市数据')
          }, 2000)
        })
      }

    //   // 1. then方法会返回一个新生成的promise对象，可以被链式调用
    //   const p = getPname()
    //   const p2 = p.then(res => {
    //     console.log(res) // 省份数据

    //     // 2. then方法中回调函数返回值会影响新Promise对象的状态和结果
    //     return new Promise((resolve, reject) => {
    //       setTimeout(() => {
    //         resolve('城市数据')
    //       },2000)
    //     })
    //   })
    //   console.log(p2) // 
    //   console.log(p === p2) // false p2 新生成的Promise对象
    //   p2.then(res =>{
    //     console.log(res) // 城市数据
        
    //   })

    //   Promise - 链式调用
    getPname().then(res => {
        console.log(res) // 第一次异步任务的结果

        // 返回下一个异步任务
        return getCname()
    }).then(res => {
        console.log(res) // 第二次异步任务的结果
        // return  下一个异步任务……
    })
      
      
    </script>
  </body>
</html>
